<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>团队列表</title>

    <!-- Set render engine for 360 browser -->
    <meta name="renderer" content="webkit">
    <!-- No Baidu Siteapp-->
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="stylesheet" type="text/css" href="/Public/css/mui.min.css" />
    <link rel="stylesheet" href="/Public/bs/css/font-awesome.min.css">
    <link rel="stylesheet" href="/Public/amazeui/assets/css/amazeui.min.css"/>
    <link rel="stylesheet" href="/Public/mescroll/css/mescroll.min.css"/>
    <style>
        .mescroll {
            font-size: 1.4rem;
        }
        .my-goods-img {
            width: 70px;
            height: 70px;
            padding: 5px;
            margin-right: 5px;
        }
        .my-goods-img img{
            width: 60px;
            height: 60px;
        }
        .my-good-des {
            line-height: 22px;
        }
        .my-good-right {
            line-height: 35px;
            margin-right: 10px;
        }
        .am-text-truncate{
            max-width: 100px;
        }
        .am-header-title,.am-header-icon{
            font-size: 1.6rem !important;
        }
        [v-cloak] {
            display: none
        }
        #dataList {
            margin-top: 5px;
        }
        .mescroll{
            position: fixed;
            top: 14px;
            bottom: 0;
            height: auto;
        }
        .tab{display: flex;line-height: 40px;position: fixed;top: 10px;width: 100%;z-index: 10;border-bottom: 1px #ccc solid;}
        .tab a{width: 33.333333%;background: #fff;text-align: center;}

    </style>
</head>

<body>
<div class="container">
    <header class="mui-bar mui-bar-nav" style="background: #0C0C0C;">
        <a class="mui-icon mui-icon-left-nav mui-pull-left" href="javascript:history.back()" style="color:white;"></a>
        <a class="mui-icon mui-icon-reply mui-pull-right" ></a>
        <h1 class="mui-title" style="color:white;">我的团队</h1>
    </header>
    <div class="mescroll" id="mescroll" style="margin-top: 2.5rem;">
        <ul class="am-list" id="dataList" v-cloak>
            <li class="am-cf"  v-for = "item in list">
                <div class="am-fl my-good-des" style="width: 100%;height: 6rem;line-height: 4rem;">
                    <div v-if="item.headimg!='0'" style="width: 5rem;height: 5rem;margin-top: 0.5rem;margin-left: 2rem;border-radius: 50%; overflow: hidden;float: left;">
                        <img :src="item.headimg" style="width: 5rem;">
                    </div>
                    <div v-else style="margin-top: 1rem;margin-left: 2rem;float: left;">
                        <img src="/Public/images/head.png" style="width: 5rem;">
                    </div>
                    <div style="margin-left: 2rem;float: left;height: 6rem;width: 20rem; line-height: 2rem;">
                       <span v-if="item.register_name=='0'">姓名：未填写</span>
                        <span v-else>姓名：{{item.register_name}}</span>&nbsp;&nbsp;&nbsp;&nbsp;
                        <span>编号：{{item.bind_id}}</span>
                        <br/>
                        <span style="font-size: 12px;">注册时间：{{item.create_time}}</span>
                        <br/>
                        <span style="font-size: 12px;">推荐人手机号：{{item.agent_tel}}</span>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</div>
</div>
<nav class="mui-bar mui-bar-tab">
    <a class="mui-tab-item"  href='/index.php/home/Index/index'>
        <span class="mui-icon mui-icon-home"></span>
        <span class="mui-tab-label">首页</span>
    </a>
    <a class="mui-tab-item" href='/index.php/home/Chat/index'>
        <span class="mui-icon mui-icon-chat"></span>
        <span class="mui-tab-label">群聊</span>
    </a>
    <a id="shop" class="mui-tab-item" href="/index.php/Home/Shop/index">
        <span class="mui-icon"><i class="fa fa-shopping-cart" aria-hidden="true"></i></span>
        <span class="mui-tab-label">商城</span>
    </a>
    <a class="mui-tab-item" href='/index.php/home/Member/index'>
        <span class=" mui-icon mui-icon-contact"></span>
        <span class="mui-tab-label">我的</span>
    </a>
</nav>
</div>
<script type="text/javascript" src="/Public/js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="/Public/vue/vue.js"></script>
<script src="/Public/amazeui/assets/js/amazeui.min.js"></script>
<script type="text/javascript" src="/Public/mescroll/js/mescroll.min.js"></script>
<script>






        var vm = new Vue({
        el: "#dataList",
        data: {
            list: [],
        },


            mounted: function () {
            var self = this;
            self.mescroll = new MeScroll("mescroll", {
                up: {
                    auto: true, //是否在初始化时以上拉加载的方式自动加载第一页数据; 默认false
                    isBounce: false, //此处禁止ios回弹,解析(务必认真阅读,特别是最后一点): http://www.mescroll.com/qa.html#q10
                    callback: self.upCallback, //上拉回调,此处可简写; 相当于 callback: function (page) { upCallback(page); }
                    empty:{ //配置列表无任何数据的提示
                        warpId:"dataList",
                        tip : "亲,暂无相关数据哦~" ,
                    },
                }
            });
        },
        methods: {
            upCallback: function (page) {
                var page = page;
                var self = this;
                $.ajax({
                    url: '/index.php/Home/wei/member',
                    type: "post",
                    dataType: "json",
                    data: {
                        p: page.num
                    },
                    success: function (res) {
                        console.log(res);
                        if (page.num == 1) {
                            self.list = res.data;
                        } else {
                            self.list = self.list.concat(res.data);
                        }

                        if (res.data.length < 10) {
                            self.mescroll.endBySize(res.data.length, true);
                        } else {
                            self.mescroll.endBySize(res.data.length);
                        }
                    }
                });
            }
        },

        filters: {
            time: function (value) {

                let d = new Date(parseInt(value) * 1000)

                return (d.getFullYear()) + '-' + (d.getMonth() + 1 > 9 ? d.getMonth() + 1 : '0' + (d.getMonth() + 1)) + '-' + (d.getDate() > 9 ? d.getDate() : '0' + d.getDate())

            }
        },

    })

</script>
</body>